<template>
	<view>
		<view class="list  flex-c">
			<view class="list_icon flex-c" :class="[info.status==2&&'finish',info.isComplete==1&&'cando']"
				@click="setFinish()">
				<u-icon name="checkmark-circle-fill" color="#00B034"
					size="24px" v-if="info.status==2"></u-icon>
			</view>
			<view class="list_son" @click="$func.toUrl('/pages_main/task/detail?id='+info.id)">
				<view class="list_title flex-s">
					<view class="list_name flex-c">
						<view class="theme">{{info.theme}}</view>
						<!-- 	<view class="tag " :class="['tag'+info.status]" v-if="info.status!=2">{{status[info.status]}}</view> -->
					</view>
					<view class="time">{{info.endTime?moment(info.endTime).format('YYYY-MM-DD HH:mm'):''}}</view>
				</view>
				<view class="list_content flex-s">
					<view class="time">来自客户：{{info.customerName}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import moment from "moment"
	export default {
		name: "listCard",
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			status: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				show: false,
				info: {},
				moment: moment
			}
		},
		created() {
			this.info = { ...this.item }
		},
		methods: {
			setFinish() {
				if (this.info.status == 2) {
					// if (this.info.isNext == 1 || this.info.isRecord == 1) {
					// 	this.$emit('setNext', this.info)
					// }
					return
				}
				if (this.info.isComplete == 1) {
					uni.showModal({
						title: '提示',
						content: '确认完成任务？',
						confirmText: "确认",
						cancelText: "取消",
						success: (rest) => {
							if (rest.confirm) {
								this.$http.post("/crm/finishCrmTask/" + this.info.id, {}).then(res => {
									this.info.status = 2
									// if (this.info.isNext == 1 || this.info.isRecord == 1) {
										this.$emit('setNext', this.info)
									// }
								})
							}
						}
					});
				}
			},


		}
	}
</script>

<style scoped lang="scss">
	.list {
		margin-left: 5px;

		padding: 10px 15px 10px 0;
		font-size: 13px;
		border-bottom: 1px solid #EDEDED;


		// 	&:nth-last-child(1) {

		// 			border: none;


		// 	}
		.list_icon {
			width: 20px;
			height: 20px;
			background: #FFFFFF;
			border: 1px solid #DADADA;
			border-radius: 50%;
			margin-right: 10px;

			&.finish {}

			&.cando {
				border: 1px solid #999999;
			}
		}

		.list_son {
			flex: 1;
			align-items: flex-start;




			.list_title {
				flex: 1;

				color: #333333;
				font-size: 14px;
				margin-bottom: 5px;
				align-items: flex-start;

				.list_name {
					justify-content: flex-start;
					align-items: flex-start;
					flex: 1;

					.theme {
						// flex: 1;
					}
				}

				.tag {
					height: 14px;
					border-radius: 3px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 11px;
					color: #ffffff;
					margin-left: 5px;
					min-width: 40px;
					margin-top: 3px;

					&.tag1 {
						background-color: #CACACA;
					}

					&.tag2 {
						background-color: #00B034;
					}

					&.tag3 {

						background-color: #DF0024;
					}

					&.tag4 {
						background-color: #FF5722;
					}
				}

				.time {
					color: #999999;
					width: 125px;
					// margin-left: 5px;
					text-align: right;
				}
			}

			.more {
				color: #EF9C00;
			}

		}

		.list_content {
			color: #666666;

			.time {
				color: #999999;
			}
		}
	}
</style>